<template>
  <div class="ques-container">
    <el-card class="box-card" shadow="always">
      <div class="search-wrap">
        <div class="input-item">
          <div class="label">关键字</div>
          <el-input v-model="searchValue" size="small"></el-input>
        </div>
        <div class="search-btn-wrap">
          <el-button size="small" @click="onClear">清除</el-button>
          <el-button type="primary" size="small" @click="onSearch">搜索</el-button>
        </div>
      </div>
      <el-alert
        class="total"
        :title=" '数据一共' + (randomData.counts ? randomData.counts : 0) +'条'"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>
      <div>
        <el-table :data="randomData.items" stripe style="width: 100%">
          <el-table-column prop="id" label="编号" min-width="200"></el-table-column>
          <el-table-column label="题型" min-width="80">
            <template slot-scope="scope">
              <span>{{scope.row.questionType | formatType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="题目编号" min-width="220">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.questionIDs" :key="index">
                <a href="javascript:;" class="question-id" @click="onPreview(item)">{{item.number}}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" min-width="180"></el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" min-width="100"></el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" min-width="100"></el-table-column>
          <el-table-column prop="userName" label="录入人" min-width="100"></el-table-column>
          <el-table-column label="操作" min-width="70">
            <template slot-scope="scope">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                circle
                size="small"
                @click="onDelete(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrap">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="randomData.counts"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          @size-change="sizeChange"
          @current-change="currentChange"
          @prev-click="currentChange"
          @next-click="currentChange"
        ></el-pagination>
      </div>
    </el-card>

    <el-dialog
      title="题目预览"
      width="900px"
      :visible.sync="showPreview"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <RandomPreview ref="randomPre" :detailId="detailId" :visible.sync="showPreview" />
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms } from "@/api/hmmm/questions.js";
import RandomPreview from "../components/randoms-preview";
export default {
  components: {
    RandomPreview,
  },
  data() {
    return {
      searchValue: "",
      randomData: {},
      pageSizes: [10, 20, 30, 40, 50],
      pageSize: 20,
      currentPage: 1,
      showPreview: false,
      detailId: 0,
    };
  },
  mounted() {
    this.getQuestionsRandomsData();
  },
  methods: {
    async getQuestionsRandomsData() {
      try {
        const res = await randoms({
          keyword: this.searchValue,
          page: this.currentPage,
          pagesize: this.pageSize,
        });
        this.randomData = res.data;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    sizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.getQuestionsRandomsData();
    },
    currentChange() {
      this.getQuestionsRandomsData();
    },
    onSearch() {
      this.currentPage = 1;
      this.getQuestionsRandomsData();
    },
    onClear() {
      if (!this.searchValue) {
        return;
      }
      this.currentPage = 1;
      this.searchValue = "";
      this.getQuestionsRandomsData();
    },
    onDelete(item) {
      try {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await removeRandoms({ id: item.id });
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            if (this.randomData.items.length === 1) {
              if (this.currentPage > 1) {
                this.currentPage--;
              }
            }
            await this.getQuestionsRandomsData();
          })
          .catch(() => {});
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    onPreview(questionItem) {
      this.showPreview = true;
      this.detailId = questionItem.id;
      const randomPre = this.$refs.randomPre;
      if (randomPre) {
        randomPre.getDetail();
      }
    },
    handleClose(done) {
      this.$refs.randomPre.hideVideo();
      done();
    },
  },
};
</script>

<style lang='less'>
.ques-container {
  padding: 10px;

  .search-wrap {
    display: flex;
    justify-content: space-between;

    .label {
      width: 70px;
      color: #606266;
      margin-right: 10px;
      font-size: 14px;
      font-weight: bold;
      text-align: right;
    }

    .input-item {
      display: flex;
      align-items: center;
    }
  }

  .search-btn-wrap {
    display: flex;
  }

  .total {
    margin: 20px 0;
  }

  .question-id {
    color: #0099ff;
  }

  .pagination-wrap {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
